<template>
    <div class="form-content-box">
        <div class="item-box"
             v-for="(item, index) in content.formItem"
             :key="index">
            <FormItem :formItem="item"
                      :index="index"
                      :length="content.formItem.length"/>
        </div>
        <div class="submit-btn-box">
            <el-button type="primary" plain
                       size="mini"
                       @click="addFormItem();">
                点击添加表单项
            </el-button>
            <div class="btn-attr-box">
                <div class="attr-item-label">按钮文字</div>
                <div class="block">
                    <el-input v-model="content.text" size="mini" type="text"/>
                </div>
            </div>
            <div class="btn-attr-box">
                <div class="attr-item-label">提交成功后提示文案</div>
                <div class="block">
                    <el-input v-model="content.msg" size="mini" type="text"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import FormItem from './FormItem.vue';

    export default {
        name: 'FormContent',
        props: {
            content: {
                type: Object,
                default: _ => {
                    return {
                        text: '提交',
                        msg: '感谢您的认真填写，内容已经提交成功！',
                        formItem: [
                            {
                                type: 'text',
                                label: '姓名',
                                error: '',
                                placeholder: '',
                                required: false
                            },
                            {
                                type: 'number',
                                label: '手机',
                                error: '',
                                placeholder: '',
                                required: false
                            },
                            {
                                type: 'text',
                                label: '地址',
                                error: '',
                                placeholder: '',
                                required: false
                            }
                        ]
                    };
                }
            }
        },
        components: {
            FormItem
        },
        methods: {
            addFormItem() {
                this.content.formItem.push({
                    type: 'text',
                    label: '自定义',
                    error: '请输入xxx',
                    // 用户输入是否合法
                    status: true,
                    placeholder: '请输入正确的xxx',
                    required: false
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .form-content-box {
        padding-bottom: 20px;

        .item-box + .item-box {
            margin-top: 20px;
        }
        .submit-btn-box {
            text-align: center;
            padding: 12px 0 0;
            margin-top: 20px;
            border-top: 1px solid rgba(0, 0, 0, .15);

            .btn-attr-box {
                text-align: left;
                margin-top: 10px;

                .attr-item-label {
                    margin-bottom: 4px;
                }
            }
            .el-button {
                width: 100%;
            }
        }
    }
</style>
